<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view solt="top">
        <u-navbar title="粉丝" title-size="36"></u-navbar>
      </view>
      <u-gap height="20"></u-gap>
      <view class="" style="padding: 20rpx">
        <view class="follow-tip"> 我的粉丝（150人） </view>
        <view
          class="message-box dis-flex flex-y-between flex-y-center"
          v-for="(item, index) in itemList"
          :key="index"
        >
          <view class="box-left">
            <u-avatar
              style="align-self: center"
              src="../../static/img/xt.png"
              size="100"
            ></u-avatar>
            <view class="" style="margin-left: 20rpx"> 用户昵称 </view>
          </view>
          <view v-if="index == 1" class="box-right" @click="onCancel"> 回关 </view>
          <view v-else class="box-right yet-follow"> 互相关注 </view>
        </view>
      </view>
    </z-paging>

    <u-popup v-model="show" height="320" border-radius="15" mode="bottom">
      <view class="popup-box">
        <view class="btn btn-desc"> 确认取消关注该用户？ </view>
        <view class="btn btn-confirm"> 取消关注 </view>
        <u-gap height="20"></u-gap>
        <view class="btn" @click="show = !show"> 取消 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      imgStyle: {
        width: '12rem'
      },
      itemList: [{}, {}]
    }
  },
  methods: {
    queryList(page, pageSize) {
      this.initData(page, pageSize)
    },
    initData(page, pageSize) {
      //let self = this;
      // self.$u.api.getOrderList({
      // 	limit: pageSize,
      // 	page: page,
      // 	status: status
      // }).then(res => {
      // 	self.onOrderLoad(self.current, res.list, false);
      // }).catch(res => {
      // 	self.onOrderLoad(self.current, null, false);
      // });
      //this.onOrderLoad(this.current, this.itemList, false);
    },
    onCancel() {
      this.show = true
    }
  }
}
</script>

<style>
page {
  padding: 30rpx 20rpx;
}

.follow-tip {
  font-size: 32rpx;
  color: #999999;
}
.message-box {
  position: relative;
  background-color: #fff;
  padding: 20rpx 0;
  border-bottom: #ededed solid 2rpx;
}
.box-left {
  display: flex;
  align-items: center;
  font-size: 34rpx;
  color: #333333;
}
.box-right {
  width: 160rpx;
  height: 60rpx;
  background: #fa453c;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 60rpx;
  text-align: center;
}
.yet-follow {
  background: #cccccc;
}

.btn {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  text-align: center;
}

.btn-desc {
  color: #999999;

  font-size: 28rpx;
}
.btn-confirm {
  color: #f54831;
}
</style>
